<template>
  <scroll ref="suggest"
          class="suggest"
          :data="list"
          :pullup="pullup"
          @scrollToEnd="searchMore">
    <ul class="suggest-list">
      <li class="suggest-item"
          v-for="(item, index) in list"
          @click="setMusic(item.id,item.artists[0].name,item.duration)"
          :key="index">
        <div class="icon">
          <i class="icon-music"></i>
        </div>
        <div class="name">
          <p class="text">{{item.name}} - {{item.artists[0].name}}</p>
        </div>
      </li>
      <Loading v-show="hasMore"></Loading>
    </ul>
  </scroll>
</template>

<script>
import Loading from 'base/loading/loading'
import { createSong } from 'common/js/Wysong'
import { mapActions, mapGetters } from 'vuex'
import Scroll from 'base/scroll/scroll'
export default {
  components: {
    Scroll,
    Loading
  },
  props: {
    query: {
      type: String,
    },

  },
  data () {
    return {
      pullup: true,
      default: '',
      // 页数
      page: 1,
      // 限制
      limit: 20,
      list: [],
      hasMore: true
    }
  },
  computed: {
    ...mapGetters(['playlist', 'currentSong', 'currentIndex'])
  },
  methods: {
    ...mapActions([
      'selectPlay'
    ]),
    // 格式化歌词
    formatLyric (lyric) {
      let obj = {}
      if (lyric) {
        let resArr = lyric.split("\n")
        resArr.map((item) => {
          if (item.split(']')[0].substr(1) != "") {
            obj[item.split(']')[0].substr(1)] = item.split(']')[1]
          }
        })
        console.log(obj);
      }
    },
    // 点击search上的歌曲播放
    setMusic (id, singer, duration) {

      this.$api.music.getMusicLyric(id).then(res => {
        this.formatLyric(res.lrc.lyric)
      })
      let searchMusic = {}
      // 歌曲可用
      this.$api.music.checkMusic(id).then(res => {
        // 获取歌曲url
        if (res.success) {
          Promise.all(
            [
              this.$api.music.getMusicDetail(id).then(detailRes => {
                searchMusic.id = detailRes.songs[0].al.id
                searchMusic.name = detailRes.songs[0].al.name
                searchMusic.image = detailRes.songs[0].al.picUrl
              }),
              this.$api.music.getSongUrl(id).then(UrlRes => {
                searchMusic.url = UrlRes.data[0].url;
              })
            ]).then(res => {
              searchMusic.imagesinger = singer
              searchMusic.duration = duration

              // 放入播放数组，播放
              let songs = JSON.parse(JSON.stringify(this.playlist))
              let index = this.currentIndex
              songs.splice(index, 0, searchMusic)
              console.log(songs, index);

              this.selectPlay({ list: songs, index })
            }).catch(err => {
              this.$toast.fail('没有版权');
              console.log('错了一个', err);
            })
        }
      })
    },
    search () {
      this.hasMore = true
      this.$api.music.search(this.query, this.page, this.limit).then(res => {
        console.log('search', res);
        this._checkMore(res.result)
        this.list = res.result.songs
      }).catch(err => { this.hasMore = false })
    },
    searchMore () {
      if (!this.hasMore) {
        return
      }
      this.limit += this.limit
      this.search()
    },
    _checkMore (result) {
      if (this.limit * this.page >= result.songCount) {
        this.hasMore = false
      }
    }
  },
  watch: {
    query () {
      if (!this.query) {
        return
      }
      // 滚动到顶部
      this.$refs.suggest.scrollTo(0, 0)
      // 变了重新回到20
      this.limit = 20
      this.search()
    }
  },
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable'
@import '~common/stylus/mixin'
.suggest
  height 100%
  overflow hidden
  .suggest-list
    padding 0 30px
    .suggest-item
      display flex
      align-items center
      padding-bottom 20px
    .icon
      flex 0 0 30px
      width 30px
      [class^='icon-']
        font-size 14px
        color $color-text-d
    .name
      flex 1
      font-size $font-size-medium
      color $color-text-d
      overflow hidden
      .text
        no-wrap()
  .no-result-wrapper
    position absolute
    width 100%
    top 50%
    transform translateY(-50%)
</style>